<template>
  <div class="box" @click="goSon()">
    <div class="title">
      <div id="type" :class="btn===index?'active':''" v-for="(item,index) in arr" @click="goSon(),tab(index)">
        <h3  @click="getGoods(item.name)">{{item.name}}</h3>
      </div>
    </div>
    <div class="detail">
      <router-view></router-view>
    </div>
  </div>

</template>

<script>
import axios from 'axios'
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

export default {
  data() {
    return {
      arr: [],
      color:'white',
      btn:0,
    }
  },
  methods: {
    goSon(index) {
      // console.log(this.$router)
      this.$router.push({
        path: "/goods/detail",
      })
    },
    tab(index){
      this.btn=index
    },
    ...mapActions(['getGoods'])

  },
  created() {
    axios.get('http://localhost:8000/goods').then((req)=>{
      // console.log(req)
      this.arr=req.data.goods
      // console.log(this.arr)
    })
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.box {
  display: flex;
}

.detail {
  flex: 1;
}

.title {
  font-size: 2.12vw;
  width: 24.8vw;
  height: 155vw;
  text-align: center;
  box-sizing: border-box;
  background-color: #f3f5f7;
  overflow: auto;
}

.title #type{
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid rgba(7,17,27,0.1);
  height: 14vw;
  padding: 0 3.12vw 0;
}
.title :active{
  background-color: antiquewhite;
}
#type h3{
  font-size: 3.12vw;
  line-height: 1;
  color: rgba(0,0,0,0.5);
}
.active{
  background-color: white;
}

</style>